
<template>
  <div class="container">
    <div class="title">  输入查询的范围 （1~100的整数） </div>
    <div class="content">
      <el-input
        v-model.number="st"
        placeholder="最低成绩范围"
      />
      <el-input
        v-model.number="en"
        placeholder="最高成绩范围"
      />

      <el-button type="primary" icon="el-icon-search" round @click="search()">查询</el-button>
    </div>

    <div class="progress">
      <el-row>
        <el-col :span="6" class="tips">查询进度：</el-col>
        <el-col :span="16"><el-progress :text-inside="true" :stroke-width="24" :percentage="progress" status="success" /></el-col>
      </el-row>
    </div>

    <div class="now-grade">
      当前查询分数：<span>{{ nowGrade }}</span>
    </div>
    <!-- <div class="title"> 手动模拟查询成绩 </div> -->
    <el-table
      :data="dataList"
      style="width: 100%"
      :header-cell-style="{
        border: 'none',
        color: 'rgb(29, 21, 29)',
        padding: '9px 0',
        'font-size': '14px',
        'font-weight': '400',
      }"
      :cell-style="{ color: '#333', padding: '6px 0', 'font-size': '14px' }"
    >
      <el-table-column
        prop="name"
        label="课程名称"
      />

      <el-table-column
        prop="grade"
        label="成绩"
      >
        <template slot-scope="scope">
          <span class="grade">{{ scope.row.grade }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="footer-tips el-icon-info"> 本网站仅仅学习交流使用~ </div>
  </div>
</template>

<script>
import { api_serach } from '@/utils/login'
export default {
  name: 'Home',
  data() {
    return {
      st: 60,
      en: 100,
      dataList: [],
      progress: 0,
      nowGrade: 0
    }
  },
  methods: {
    isInteger(obj) {
      return Math.floor(obj) === obj
    },
    async search() {
      this.dataList = []
      let st = this.st
      let en = this.en

      // console.log(st, en)
      let msg = ''
      if (!(st > 0 && st <= 100)) {
        msg = '最低成绩不合法'
      } else if (!(en > 0 && en <= 100)) {
        msg = '最高成绩不合法'
      } else if (st > en) {
        msg = '最低成绩不能高于最高成绩'
      } else {
        st = st * 10
        en = en * 10
        let flag = false
        for (let i = st; i <= en; i++) {
          const value = i / 10
          try {
            let res = await api_serach(value)
            this.nowGrade = value
            res = res.data
            if (res['datas']['xscjcx']['totalSize'] > 0) {
              const list = res['datas']['xscjcx']['rows']
              for (const j in list) {
                this.dataList.push({ name: list[j].KCMC, grade: value })
              }
            }

            this.progress = parseInt((i - st + 1) / (en - st + 1) * 100)
          } catch (error) {
            if (!flag) {
              this.$message({
                message: '用户失效',
                type: 'warning'

              })
              this.$router.push('/')
              flag = true
            }
          }
        }

        return
      }
      this.$message({
        message: msg,
        type: 'warning'
      })
    }

  }
}
</script>

<style scoped  lang="scss">
  .container {

    width: 30%;
    min-width: 300px;
    margin: 50px auto;
    .title {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
    }
    .content {
      display: flex;
    }
    .el-slider {
      width: 80%;
    }
    .range-text {
      border: 1px solid rgb(183, 187, 185);
      width: 200px;
      height: 40px;
      font-size: 20px;
      line-height: 40px;
      border-radius: 5px;
    }
  }
  .el-table {
    margin-top: 50px;
  }
  .grade {
    color: rgb(31, 84, 255);
    font-size: 14px;
  }
  .progress {
    margin-top: 40px;
  }

  .tips {
    font-size: 14px;
    line-height: 24px;
    color: rgb(60, 48, 70);
  }
  /deep/ .el-progress-bar__outer {
    background-color: #baceff86;
  }

  .now-grade {
    margin: 20px 0;
    span {
      color: rgb(245, 0, 0);
    }
  }

  .footer-tips {
    margin: 20px;
    font-size: 14px;
    color: rgb(15, 0, 82);
  }
</style>

